Designing Map Symbols for Mobile Devices: 
Challenges, Best Practices, and the Utilization 
of Skeuomorphism 

Joshua E. Stevens, Anthony C. Robinson, Alan M. MacEachren 

GeoVI STA Center, Department of Geography, The Pennsylvania State Uni- 
versity 



Abstract. In this work we make three contributions to the design and use 
of map symbol ogy on mobi I e devi ces. F i rst, we present an overvi ew of the 
current state of mobi I e symbol ogy and best practi ces based on previ ous 
empirical findings. Second, we demonstrate the design of a new set of map 
symbols for mobile devi ces based on these guidelines and proposed design 
strategies. These new symbols were developed for comparison with an ex- 
isting standard used by emergency management and disaster relief profes- 
sionals. Lastly, we discuss the role of skeuomorphism i n the context of af- 
fording interaction in map symbol design. We believe this work advances 
the sci ence of mobi I e symbol ogy and demonstrates a practi cal appl i cati on of 
skeuomorphic design in modern mapping applications. 
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1. Introduction 

A number of recent technologies and tools have demonstrated the utility of 
mobile mapping devices in a wide range of settings. The potential utility of 
mobile maps is particularly clear in mission- critical environments such as 
law enforcement or emergency response and recovery. Within such settings, 
mobile devices must not only be reliable in both form and function, they 
must have utility to the mission. This requirement places particular empha- 
sis on the visual interface of the device, as it connects the user to the appli- 
cation where information must beinterpreted and acted upon quickly. With 
a growing number of location- based applications and support tools being 



developed for these purposes, great care must be taken in the way events 
are symbolized. 

In addition to mission- critical usage by professional users, mobile maps 
have permeated consumer environments and are ubiquitously employed to 
aid navigation, enhance tourism, and enable a wide array of location- based 
services that range from tracking a lost phone to local dating services (Lee, 
Zhu and H u 2005). Whether for profession or pleasure, the success of many 
mobile maps relies on interactive functionality that transforms geographic 
data i nto acti onabl e i nf ormati on . 

At the same time, most maps are still largely static; base maps rarely need 
updating, key points of interest (POI ) tend to reflect a constant location and 
information (e.g., a name and address), and many elements of cartographic 
design are typically not interactive (e.g., highway labels, POI). For these 
reason, we argue that an effective mobile map is one that successfully dis- 
tinguish es i nter acti ve an d n on- i nter acti ve symbol ogy. 

This paper reviews research on mobile mapping with an emphasis on map 
symbol ogy for and interaction with mobile maps. Based on the review, we 
elucidate some of the design challenges and considerations required for 
providing meaningful maps on a range of mobile devices reliant on interac- 
tive symbol ogy. Emphasis is given to applications in emergency manage- 
ment and law enforcement where decisions must be made quickly and ac- 
curately, though we extend our fi ndi ngs to the broader range of mobile map 
uses. We conclude the paper with preliminary guidelines derived from the 
literature for design of mobile maps and then outline some key research 
and development challenges focused on leveraging technological advances 
to achi eve effecti ve mobi I e mappi ng appl i cati ons. 

1.1. Mobile Devices: Scope, Limitations, and Considerations 

Mobile devices are considered here to be ones that are essentially portable 
and can be used remotely. These include laptop computers, smartphones, 
tablet computers, wearable devices, Personal Digital Assistants (PDAs), and 
in- vehicle units that include but are not limited to navigation systems. For 
the purpose of this paper, we focus on the subset of mobi le devi ces that are 
held in or used by one's hands while mobile. This focus excludes laptop 
computers as well as wearable devices used primarily for augmented reality 
applications. Accordingly, the remainder of this article deals primarily with 
smartphones and tablet computers. 

Mobile devi ces defined in this way have many potential benefits, including: 
collecting information in the field or during a police patrol (Bragdon et al. 
2011), obtaining live updates remotely when in the field (Weakliam et al. 



2005), communicating with natural/ manmade disaster first responders 
(Erharuyi and Fairbairn 2003, MacEachren et al. 2006), and visual collabo- 
ration among large teams during urban emergencies (Monaresetal. 2009). 

Despite the advantages suggested above, mobile devices are not without 
their limitations. Most notable of these are reduced screen size and display 
resolution (Burigat and Chittaro 2011), reduced capability for input and 
interaction while the user is in motion (Bragdon et al. 2011), and limited 
processing power and memory (Follin and Bouju 2008). Each of theselimi- 
tations influences how symbol ogy can be applied and whether or not a par- 
ticular approach is effective. These limitations can often be compounding. 
For example, limited screen space will dictate limits on the number and size 
of symbols that can be displayed legibly on the screen and the extent of ter- 
ritory that can be displayed. A desktop environment, in addition to support- 
ing display of larger territories and more symbols can alleviate the con- 
straints it does have through zooming, panning, and other interactions. 
However, the mobile utility of smaller devices is hamstrung by the in- 
creased effort si mi I ar i nteracti ve behavi ors requi re when usi ng the devi ce i n 
concurrence with another common task, like walking or driving. If this in- 
crease in effort to interact and the attention that must be directed to that 
interaction is too onerous, it can impede the device's advantages as a mobile 
aid (Willisetal. 2009). 

A number of attempts have been made to understand and combat these 
limitations. The remainder of this paper will discuss several of these efforts 
that are most relevant to mobile mapping with an emphasis on issues of 
map symbol ogy and interaction with the map display for mobile devices. 
Through this discussion, the latest directions in the literature and key chal- 
lenges that remai n for future research are also identified. 

The existing literature on mobile map symbology is diverse and addresses 
many specific goals and interests. It is therefore useful to identify common 
themes that are prevalent. We have identified three themes that appear 
within the broader context of map symbology and interface design for mo- 
biledevices; specifically, the literature can be categorized as emphasizing: 

1 Symbology. This work addresses use-specific symbol design, the 
sal i ence of the symbol s due to di spl ay parameters, f i gure- ground re- 
lationships, semantics, and the performance of symbols in task- 
driven evaluations. 

2. Interaction. Research in this area emphasizes how users interact 
with devices, operate menus, allocate attention, and respond to dis- 
plays that use symbols as part of a greater suite of functions. Exam- 
ples include graphical hints that alert the user to symbols existing 
outside of the currently active view, symbols that aggregate when 



they are too numerous for the screen, and the role of touch, ges- 
tures, and buttons to manipulate the display. 
3. Remote information access and collaboration. Mobile devic- 
es are frequently used to report, update, collect, and communicate 
information remotely. A growing body of literature is centered on 
the use of map symbol ogy and interface design to facilitate these 
collaborative tasks 

There is considerable overlap between these themes and they are by no 
means absolute. We continue in the following sections with key lessons 
learned, emphasizing those most relevant to items 1 and 2: symbology and 
interaction. 



2. Previous Research: Symbol Design and User Ex- 
perience 

Map symbols have been categorized in multiple ways and there is a wide 
range of terminology used to discuss map symbology in the literature. To 
create consi stency across the studi es that wi 1 1 be cited bel ow, thi s paper wi 1 1 
use the terminology described by MacEachren (1995), focusing on the rela- 
tive abstractness or iconicity of symbols as it related to three categories of 
positional symbols that each exhibit a range on this continuum: pictorial, 
associative, and geometric. 

Many mobile devices in current production utilize touch-screen displays, 
thus it is crucial that new symbol designs consider existing work in this ar- 
ea. Morrison and Forrest (1995) conducted one of the earliest studies evalu- 
ating pictorial symbols on touch-screen devices within the context of tourist 
maps. Their work highlights the need to consider design not only from the 
standpoint of variables affecting individual symbols (eg., size and hue), but 
also semantic relationships across and between multiple symbols. For ex- 
ample, their results show that for many symbols, size does not influence the 
accuracy of visual search tasks but may greatly affect how quickly symbols 
are found. This relationship is moderated by the semantic context suggest- 
ed by other symbols on the map. A telephone symbol for example may be 
interpreted as the location of a pay phone when used in isolation or in tour- 
ism maps, while the same symbol might be interpreted as a service for call- 
ing help if nearby symbols reflect first-aid and medical care. In other 
words, how users interpret a symbol is influenced as much by context and 
nearby symbols as by the symbol's own design. 

In addition to suggesting semantic context, the design of nearby symbols 
can also influence the effectiveness of individual symbols by affecting the 



overall salience of a particular symbol. Kuo-Chen refers to this as complexi- 
ty contrast and it greatly influences the time required to identify symbols 
(2008). Related work suggests that associative symbols, such as the simple 
monochrome pictorial symbols that are typically part of standards- 
compliant recommendations, are not as strongly affected by changes in size 
as are realistic, multi-colored, sketch- based, or 3-dimensional pictorial 
symbols (Elias and Paelke 2008). Although this limitation is important to 
consider for map symbols in general, it is especially important for mobile 
devices with limited screen space. Such a limitation encourages the use of 
simple, abstract symbols over complex symbols with more detail and real- 
ism (Lee, Forlizzi and Hudson 2008). 

While the interpretation of abstract symbols is less affected by changes in 
symbol size, abstract symbols (particularly geometric symbols) are subject 
to mi si dentifi cation since the relationship between the symbol and what it 
refers to is often arbitrary. A trade-off therefore exists between accommo- 
dating a limited screen size through smaller, abstract symbols and main- 
taining semanti c cl ar i ty. 

I sol ati ng symbol ogy from the total experi ence of usi ng a mobi I e devi ce i s at 
first an attractive idea since it removes complexities of human-computer 
interaction and a potentially limitless variety of application contexts. How- 
ever, the appropriate design of symbols for mobile devices requires a com- 
plete understanding of how existing symbols are used, which symbol design 
traits and interactions between the devices and symbols improve or impede 
performance, and under which conditions or scenarios certain symbol types 
or designs are most useful . The factors influencing user experience are sub- 
ject to varying abilities of individual users and an ever-changing range of 
devicecapabilities(Baus, Cheverstand Kray2005, Meng2005). 

On par with the contentions of the previously mentioned work, Apple asks 
designers of their mobile applications to "embrace simplicity," (2011, p. 
152- 153). I n addition to generic advice, the human interface guidelines pro- 
vided by Apple impose specific requirements for size and quality of icon 
designs to ensure that the designs are effective visually and tactically. The 
requirements derive from limitations on the user's ability to see a symbol 
and the devi ce's abi I i ty to recogni ze the user's f i ngerti p when touched . Si mi - 
lar recommendations are provided by the interface guidelines from Google, 
which offers less specific advice but again reiterates the need to avoid com- 
plex, highly detailed, and realistic icons (2011). Additionally, both firms 
insist that designers consider icon design in the full context of the other 
el ements of the i nterface and the purpose for whi ch they wi 1 1 be used. 



3. Design Recommendations and Suggested Guide- 
lines 

Together, the studi es revi ewed al I ow us to make the f ol I owi ng suggesti ons: 

1 Well-designed symbols should utilize black and white figure-ground 
relationships or be based on mixed colors that have established 
meanings, such as the U.S. interstate shield's use of red and blue, 
and have high contrast against the base map. Since the majority of 
vector base maps are by default light in color, this suggests that 
symbols for such maps should maximize figure-ground with a dark 
frame and I i ght symbol . 

2. Symbols with strong semantic relationships with their referent can 
be identified more quickly on smaller screens than those that are ar- 
bitrary and geometric, sketch-based, or based on a 3-dimensional 
rendition of the referent. However, increasing levels of abstraction 
may impede the accuracy of symbol identification, and even readily 
identifiable symbols can bemisidentified if their purpose is ambigu- 
ous (e.g., the telephone symbol in Morrison and Forrest's research 
(1995)). Thus it is important to balance the speed with which users 
identify semantical I y strong pictorial symbols and the accuracy with 
which simpler abstract symbols can be located on the map. 

3. Symbols should be smaller when displayed in large numbers - po- 
tentially removing the symbol frame if necessary as long as figure- 
ground is maintained and the symbols remain touchable (for sym- 
bolsthat require interactivity). 

4. Symbols intended for concurrent use should be similar in complexi- 
ty to avoid a large contrast gradient in symbol design, except in the 
case where greater salience is desired for particular symbols (e.g., a 
hospital symbol). High complexity contrast between regular sym- 
bols and those deemed important would then be preferable (e.g., a 
hospital symbol made with an "H" will stand out amongst other 
symbols made from simple geometric shapes, like squares and cir- 
cles). 

Three additional factors that should be taken into account by symbol de- 
signers are: 

1 The capabilities of the target device(s). Touch-screen devices 
have additional symbol size requirements not present on devices that 
use other input methods. If the symbol requires tactile interaction, it 
must be large enough to be touched by a f i ngerti p. This complicates the 
task of accommodati ng smal I screens and avoi di ng cl utter. 



2. The purpose of the device or application should influence the 
method of interaction. Symbols used alongside other tasks that are 
cognitively engaging (like driving) should require as little interaction as 
possible. If interaction is required, it should be in the form of gestures, 
spoken commands, or make use of hard buttons that do not require the 
user to look at the screen. 

3. Symbols that can be interacted with should be visually dis- 
tinguishable from those that cannot. How this is achieved will 
depend on the other variables employed in the symbol design. A bold 
frame may alert the user that a symbol is an aggregate and can be 
clicked for more information, however this approach would be less ef- 
fective if symbol frames were employed for other purposes (e.g., event 
status or the degree of damage due to a disaster). 

There is a complex relationship between each of these design decisions. It is 
unlikely that a symbol will be optimal for every setting, to every user, on 
every device. The application developer, cartographer, or designer must 
weigh the costs against the benefits and evaluate the performance of their 
symbol ogy whenever possi bl e. 

3.1. Symbol Shape and the Map Symbol Box Model 

I n addition to the position of icon shape on the abstract- pictorial continu- 
um, the shape of the frame surrounding the map icon is a vital considera- 
tion. The shape of the frame dictates how much space exists for the icon, 
and thus the actual size of the interpretable icon depends on the symbol 
frame's overall shape and border thickness (Figure X right). In general, 
symbols with square frames (or rounded rectangles as in Figure 1} provide 
more internal space than other frame shapes to maximize the icon size, 
which is beneficial in visual search tasks (Morrison and Forrest 1995). 
Moreover, the additional space afforded by maximizing the space around an 
icon can be utilized for other cues, like indicating interactivity as discussed 
in 3.2. 

To aid in design decisions and the specification of design variables, we pro- 
pose the map symbol box model (Figure 1, left). Similar to the box model 
specified for cascading style sheets (CSS) for HTML documents 1 , the map 
symbol box model clarifies the foundational elements upon which a symbol 
is constructed. Defined in this way, individual design variables can be iso- 
lated and discussed explicitly, greatly enhancing the design process for new 
symbols and al I owi ng preci se criti que of existi ng symbol ogy. 



http:// www.w3schools.com/ ess/ css_ boxmodel .asp 



Map Symbol Box Model 



Icon Scaled to Fit Square 




Figure L The proposed map symbol box model (left) and an example of specifying 
symbol size relationships using the padding element of this model (right). 



By deconstructing map symbols into 'boxes within boxes,' each with a spe- 
cific attribute, the design process can more accurately reflect the relation- 
shi ps between the vari ous features of a compl ete map symbol . 

3.2. Interactive Cues via Skeuomorphism 

Skeuomorphs, typically defined as design elements that reflect ornamental 
references to previous (and potentially obsolete) analogs, are ubiquitous in 
current user interfaces. The uses of skeuomorphism in digital interfaces are 
typically aesthetic, such as realistic textures (leather and stitching) used in 
the design of mobile applications. Skeuomorphism can also be used to sug- 
gest semantic relationships. For example, the 'save file' feature in most 
software applications is represented by a 3.5" floppy disk, even though 
these disks are rarely used and new computers no longer come with the 
ability to read floppy disks. Despite a lack of academic literature on skeu- 
omorphic interface designs and criticism for their form-over- function na- 
ture, we contend that when used sparingly, skeuomorphic designs have the 
potential to enhance the performance of map symbols. 

We hypothesize that an effective use of skeuomorphism is to indicate that a 
map symbol is clickable (or touchable). By evoking a heuristic response 
akin to what we experience in the real world, map symbols - like elevator 
buttons and doorbells - can indicate interactivity by appearing to have a 
touchabl e surface different than thei r surroundi ngs. 

Figure2 provides an exampleof a skeuomorphic interactive cue: 



Standard Interactive 
( ^ f ) 

Figure 2. A subtle, 3-dimensional knurled skeuomorphic cue gives the interactive 
symbol (right) the appearance of being touchable. 



4. GeoVISTA Symbology and Future Work 

Within a project supported by the Department of Homeland Security, the 
Penn State GeoVISTA Center designed mobile symbology as a possible al- 
ternative to the existing Homeland Security Working Group (HSWG) sym- 
bology 2 . The GeoVISTA symbology (Figure 3) was designed in compliance 
with the guidelines presented in this paper. In follow up research, we plan 
to compare the symbol sets in a user study with several tasks completed on 
a mobile device. 



o <t> ^ ^ 

^ ^ 4k 

HSWG Symbols 




^ju GeoVISTA Mobile 
Symbols 



Figure 3. The DH S H SWG symbology (left) and their redesigned GeoVI STA coun- 
terparts (right). The GeoVI STA symbols also have an interactive, skeuomorphic 
version using the cue in Figure 2. 

Notable design decisions that distinguish the GeoVISTA symbology from 
the H SWG set are outl i ned bel ow. 



2 http://www.fgdc.gov/HSWG/index.html 



L The GeoVI STA symbols are arranged in a square frame. This provides 
space within the symbol frame to increase the size, and therefore I egibi I - 
ity, of the icon. 

2. To have high figure-ground contrast with the greatest number of base 
maps, which are typically light in color, the GeoVI STA symbology uses a 
I i ght i con wi thi n a dark frame. 

3. The GeoVI STA symbology is intended to have a strong semantic rela- 
tionshi p with the events or pi aces bei ng depi cted. 

4. The GeoVI STA symbology is designed as an entire set to have consistent 
visual complexity from onesymbol to the next. 

5. To further promote figure-ground relationshi ps, the GeoVI STA symbol- 
ogy has a slight shadow and raised appearance, which helps separate 
the symbols from the base map. 

Symbols intended to be interactive with feature a skeuomorphic cue that 
distinguishes them from non- interactive counterparts. 

The user study evaluation will be based on four tasks that cover visual 
search, semantic relationships, interactivity, and preference. Results are 
forthcoming. 
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